<template>


    <Search @search="query" @reset="query"></Search>

    <a-card>
        <div class="table-operations">

            <a-button v-permission="['user:add']" type="primary" @click="addModalBt">新建</a-button>
            <a-button v-permission="['user:delete']" danger>删除</a-button>

        </div>
        <a-table :columns="columns" size='small' :data-source="data" rowKey="id"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" 
            :pagination='false'>
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'sex'">
                    <a-tag :color="record.sex === 1 ? 'volcano' : 'green'">
                        {{ record.sex === 1 ? '男' : '女' }}
                    </a-tag>
                </template>
                <template v-if="column.key === 'status'">
                    <a-switch :checked="record.status === 1 ? true : false" />
                </template>
                <template v-if="column.key === 'createTime'">

                    {{ $formatDate(record.createTime) }}
                </template>
                <template v-if="column.key === 'action'">
                    <div>
                        <WsAuthority permissions="user:update">

                            <a-button type="link" primary @click="updateUserBt(record.id)">编辑</a-button>
                        </WsAuthority>
                        <WsAuthority permissions="user:delete">
                            <a-popconfirm title="请确定是否删除这条数据?" ok-text="确定" cancel-text="取消"
                                @confirm="deleteUserBt(record.id)">


                                <a-button type="link" danger>删除</a-button>
                            </a-popconfirm>
                        </WsAuthority>

                    </div>

                </template>
            </template>
        </a-table>
        <a-pagination :show-total="count => `共 ${count} 条`" v-model:current="current" v-model:pageSize="size"
            :total="count" @change="changePage" />
    </a-card>


    <UserModal ref="modalRef" @refresh="refresh" />
</template>
<script setup>
import Search from './component/search.vue'
import UserModal from './component/modal.vue'
import { columns } from '.'
import { pageN, deleteUser, userDetail } from '@/api/user';
import { message } from 'ant-design-vue';
//数据
const data = ref([])
//总数
const count = ref(0);

//当前页码
const current = ref(1);
//当前页条数
const size = ref(10)
//弹框
const modalRef = ref()
onMounted( () => {
     pageList({})
})
//获取数据
const pageList = (params) => {
    params.current = current.value;
    params.pageSize = size.value;
    pageN(params).then(res => {
        const { total, records } = res.data;
        data.value = records
        count.value = total;
        
    })
}

const refresh = () => {
    current.value = 1;
    pageList({})
}
//改变页码
const changePage = (page, pageSize) => {
    current.value = page;
    pageList({})
};

//查询与重置
const query = data => {
    pageList(data)
}
//打开弹框
const addModalBt = () => {
    modalRef.value.openModal()
}
//删除用户
const deleteUserBt = id => {
    deleteUser(id);
    message.success({content:"删除成功",onClose:()=>{
        pageList({})
    }});
   
}
//更新用户弹框
const updateUserBt = async id => {
    const { data } = await userDetail(id);
    modalRef.value.openModal(false, data)
}
const selectedRowKeys = ref([]); // Check here to configure the default column
const onSelectChange = keys => {
    console.log('selectedRowKeys changed: ', keys);
    selectedRowKeys.value = keys;
};


const hasSelected = computed(() => selectedRowKeys.value.length > 0);

const changeStatus = function (checked, event) {
    console.log(checked)
}

</script>

<style scoped></style>